﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DiscussionPage.aspx.cs" Inherits="hazem" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.signalR-0.5.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src='<%= ResolveClientUrl("~/signalr/hubs") %>'></script>
    <script type="text/javascript">
        $(function () {
            var conChat = $.connection.discussion_handler;
            conChat.addMessage1 = function (date, message, name) {
                var newComment = $('#Discussion1').html() + '<br />' + '<br />'
                                                   + '<div style="background: #DDDDFF; float: left">'
                                                   + '<label id="Name" style="color: #777">'
                                                   + name + '  '
                                                   + '</label>'
                                                   + '<label id="Message">'
                                                   + message + '  '
                                                   + '</label>'
                                                   + '<label id="Date" style="color: #BBB; float: right; height: 19px;">'
                                                   + date
                                                   + '</label>'
                                                   + '</div>';
                $('#Discussion1').html(newComment);
            };
            $("#btnSend1").click(function () {
                //Send(String msg, int discussionID, int memberID)
                conChat.send($('#txtMess1').val(), 1, $('#ID').val());
                $('#txtMess1').val('');
            });


            conChat.addMessage2 = function (date, message, name) {
                var newComment = $('#Discussion2').html() + '<br />' + '<br />'
                                                   + '<div style="background: #DDDDFF; float: left">'
                                                   + '<label id="Name" style="color: #777">'
                                                   + name + '  '
                                                   + '</label>'
                                                   + '<label id="Message">'
                                                   + message + '  '
                                                   + '</label>'
                                                   + '<label id="Date" style="color: #BBB; float: right; height: 19px;">'
                                                   + date
                                                   + '</label>'
                                                   + '</div>';
                $('#Discussion2').html(newComment);
            };
            $("#btnSend2").click(function () {
                conChat.send($('#txtMess2').val(), 9, $('#ID').val());
                $('#txtMess2').val('');
            });


            $.connection.hub.start();
        });
    </script>
</head>
<body>
    <form defaulebutton="btnSend" id="form1" runat="server">
    <div>
        <input id="ID" />
        <input id="txtMess1" />
        <input id="btnSend1" type="button" value="Send" />
     
        <div style=" width:200px; background-color:Blue; padding:10px">
            <div style=" background-color:Green; position:relative; display:inline-block; width:100%">
            22       3
            </div>
            <div style=" background-color:Yellow; position:relative; display:inline; float:right; width:30px">
            33
            </div>
        </div>
        <!-- <input id="txtMess2" style="position: absolute; top: 20px; left: 356px;" />
        <input id="btnSend2" type="button" value="Send" style="position: absolute; top: 19px; left: 496px;" /> -->
    </div>
    <div id="Discussion1">
        Discussion
    </div>
    <!--<p id="Discussion2" style="position: absolute; top: 63px; left: 356px;">
        Discussion 2
    </p> -->
    </form>
</body>
</html>
